import React, { PureComponent } from 'react'
import { connect } from 'dva'
import { Row, Col, Form, Input, Button, DatePicker } from 'antd'
import settings from '@/../config/defaultSettings'

const FormItem = Form.Item
const { RangePicker } = DatePicker

@connect(({ loading, propCheckTable }) => ({
  propCheckTable,
  loading: loading.models.propCheckTable,
}))
@Form.create()
export default class PropCheckTableSearchForm extends PureComponent {
  // 重置事件
  handleFormReset = () => {
    const { form, formResetCallback } = this.props
    form.resetFields()

    formResetCallback()
  }

  // 搜索事件
  handleSearch = e => {
    e.preventDefault()

    const { form, searchCallback } = this.props
    // 表单验证
    form.validateFields((err, fieldsValue) => {
      if (err) return

      const values = {
        ...fieldsValue,
      }
      const { rangeValue } = fieldsValue
      delete values.rangeValue
      values.pdStartDate =
        rangeValue && rangeValue[0] ? rangeValue[0].format('YYYY-MM-DD') : undefined
      values.pdEndDate =
        rangeValue && rangeValue[1] ? rangeValue[1].format('YYYY-MM-DD') : undefined

      searchCallback(values)
    })
  }

  renderSearchBtn() {
    const { loading } = this.props
    return (
      <div style={{ marginLeft: 'auto' }}>
        <Button type="primary" htmlType="submit" loading={loading}>
          查询
        </Button>
        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset} loading={loading}>
          重置
        </Button>
      </div>
    )
  }

  // 简单搜索条件
  render() {
    const { getFieldDecorator } = this.props.form
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="*盘点单编号">
              {getFieldDecorator('orderNo')(
                <Input placeholder="请输入" maxLength={settings.inputMaxLength} />,
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="*盘点人姓名">
              {getFieldDecorator('pdOperator')(
                <Input placeholder="请输入" maxLength={settings.inputMaxLength} />,
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="起止时间">
              {getFieldDecorator('rangeValue')(<RangePicker></RangePicker>)}
            </FormItem>
          </Col>
        </Row>
        {/* <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={24} sm={24}>
            <FormItem label="起止时间">
              {getFieldDecorator('rangeValue')(<RangePicker></RangePicker>)}
            </FormItem>
          </Col>
        </Row> */}
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 15 }}>
          {this.renderSearchBtn()}
        </div>
      </Form>
    )
  }
}
